<template>
	<view class="content column">
		<view class="topBox">{{list.name}}</view>
		<view class="listBox fill column">
			<view class="title">房间用水情况(近一个月)</view>
			<view class="mainBox column fill" v-if="list.pageInfo.list&&list.pageInfo.list.length > 0">
				<view class="listTop row">
					<view class="li small">日期</view>
					<view class="li fill">初始吨数(吨)</view>
					<view class="li fill">最后吨数(吨)</view>
					<!-- <view class="li fill">分摊水量(吨)</view> -->
					<view class="li fill">合计费用(元)</view>
				</view>
				<scroll-view
					class="listCen fill"
					:enable-back-to-top="true"
					@refresherrefresh="onDownRefresh" 
					refresher-default-style
					:refresher-triggered="isRefreshing"
					refresher-enabled="{{true}}"
					@scrolltolower="loadMore" 
					:onLoadmore="false"
					scroll-y="true">
						<view class="list row" v-for="(item,index) in dataList" :key="index">
							<view class="li small">{{timestamp(item.dosageDate) || '--'}}</view>
							<view class="li fill">{{item.startAmount || 0}}</view>
							<view class="li fill">{{item.endAmount || 0}}</view>
							<!-- <view class="li fill">{{item.apportionAmount || 0}}</view> -->
							<view class="li fill">{{item.totalAmountMoney || 0}}</view>
						</view>
				</scroll-view>
				<view class="listBtm">总计费用：{{list.allTotalAmountMoney}}元</view>
			</view>
			<view v-else class="mainBox column fill">
				<u-empty mode="data" icon="https://www.mescroll.com/img/mescroll-empty.png"></u-empty>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive,ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"
	import { getWatermetersDetail } from '@/common/API/ammeters'
	import dayjs from "dayjs"
	
	//处理时间戳
	const timestamp = (val : any, s) => {
		return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
	}
	const list = reactive({
		pageInfo: {},
		name:'',
		allTotalAmountMoney: '',
		no: ''
	})
	const dataList = ref([])
	const isRefreshing= ref(false)
	const isLoadMore = ref(false)
	const form = reactive({
		pageSize:15,
		pageNum:1,
		pages:0,
		queryBeginTime: null,
		queryEndTime: null
	})
	//用水明细
	const getDetail = async () => {
		let data = {
			deviceNo: list.no,//设备编号
			pageNum: form.pageNum,
			pageSize: form.pageSize,
			queryBeginTime: form.queryBeginTime,
			queryEndTime: form.queryEndTime
		}
		let res = await getWatermetersDetail(data)
		if(res){
			console.log(res)
			list.allTotalAmountMoney = res.allTotalAmountMoney
			form.pages = res.pageInfo.pages
			list.pageInfo = res.pageInfo
			if(form.pageNum == 1) dataList.value = []
			dataList.value = dataList.value.concat(res.pageInfo.list)
		}
	}
	onLoad((options)=>{
		if(options){
			form.queryBeginTime = formattingDate((new Date() - 1000*3600*24*30),"YYYY-MM-DD HH:mm:ss")
			form.queryEndTime = formattingDate(new Date(),"YYYY-MM-DD HH:mm:ss")
			list.name = options.name
			list.no = options.no
			getDetail()
		}
	})
	//下拉刷新
	const onDownRefresh = () => {
		console.log('下拉刷新')
		form.pageNum = 1
	    isRefreshing.value = true;
		getDetail()
	    setTimeout(() => {
	        isRefreshing.value = false;
	        uni.stopPullDownRefresh()
	    }, 800)
	}
	//上拉加载更多
	const loadMore = () => {
		console.log('上拉加载更多')
		if(form.pageNum*form.pageSize >= list.pageInfo.total){
			return
		}
		form.pageNum ++
	    isLoadMore.value = true;
		getDetail()
	    setTimeout(() => {
			isLoadMore.value = false;
	    }, 2000)
	}
	//格式化时间戳
	const formattingDate = (date, format)=>{
	    format = format || "YYYY-MM-DD HH:mm:ss";
	    return dayjs(date).valueOf(format);
	}
</script>
<style>
	page{
		height: 100%;
	}
</style>
<style lang="scss" scoped>
.content{
	padding-top: 16rpx;
	height: 100%;
	.topBox{
		background: #fff;
		padding: 20rpx 32rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		font-weight: bold;
		.label{
			background: $uni-color-error;
			color: #fff;
			font-size: 28rpx;
			height: 42rpx;
			line-height: 42rpx;
			padding: 0 14rpx;
			margin-left: 30rpx;
			position: relative;
			&::before{
				content: '';
				display: inline-block;
				width: 0;
				height: 0;
				border: 10rpx solid transparent;
				border-left: none;
				border-right-color: $uni-color-error;
				position: absolute;
				top: 4rpx;
				left: -10rpx;
			}
		}
	}
	.listBox{
		padding: 20rpx 22rpx 50rpx;
		overflow-y: scroll;
		.title{
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 18rpx;
		}
		.tabbox{
			padding: 0 32rpx;
			.tab{
				text-align: center;
				margin-right: 20rpx;
				background: #dedede;
				border-radius: 8rpx;
				line-height: 56rpx;
				&.active{
					background: #55931b;
					color: #fff;
				}
				&:last-child{
					margin: 0;
				}
			}
		}
		.mainBox{
			background: url('#{$imgUrl}/icon/bg_recharge_record.png') no-repeat;
			background-size: 100% 100%;
			padding: 114rpx 40rpx 60rpx;
			position: relative;
			overflow-y: scroll;
			.listTop{
				border-bottom: 2rpx solid #dedede;
				position: absolute;
				top: 36rpx;
				left: 40rpx;
				width: calc(100% - 80rpx);
				.li{
					text-align: center;
					font-size: 24rpx;
					zoom:0.8;
					font-weight: bold;
					line-height: 78rpx;
					&.small{
						width: 140rpx;
					}
				}
			}
			.listCen{
				overflow-y: scroll;
				.li{
					text-align: center;
					font-size: 24rpx;
					zoom:0.8;
					border-bottom: 2rpx solid #dedede;
					line-height: 88rpx;
					&.small{
						width: 140rpx;
					}
				}
			}
			.listBtm{
				text-align: right;
				font-size: 24rpx;
				font-weight: bold;
				margin-top: 10rpx;
				padding: 0 10rpx;
			}
		}
	}
	.no-data{
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
